<template>
	<div class="my">
		<div class="LeftNav">
			<!--element左侧导航  active-text-color="#ffd04b"-->
			<el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" @select="handleSelect" 
			background-color="#2F4056"
      		text-color="#fff"
      		>
			  	<el-submenu index="1">
				    <template slot="title">
				      	<i class="el-icon-location"></i>
				      	<span slot="title">我的</span>
				    </template>
				    <el-menu-item-group style="background: red;">
				      	<el-menu-item index="Xiaoxi">我的消息</el-menu-item>
				      	<el-menu-item index="Email">我的任务</el-menu-item>
				      	<el-menu-item index="Zuzhijigo">我的管理</el-menu-item>
				      	<el-menu-item index="Wenzhangguanli">我的文章</el-menu-item>
				    </el-menu-item-group>
			  	</el-submenu>
			  	<el-submenu index="2">
			  		<template slot="title">
					    <i class="el-icon-menu"></i>
					    <span slot="title">管理</span>
				    </template>
				    <el-menu-item-group>
				      	<el-menu-item index="2-1">选项1</el-menu-item>
				      	<el-menu-item index="2-2">选项2</el-menu-item>
				    </el-menu-item-group>
			  	</el-submenu>
			  	
			</el-menu>
		</div>
		
		<div class="rightNav">
			<div class="top">
				<el-tabs v-model="editableTabsValue" type="card"  @edit="handleTabsEdit" @tab-click='tabClick'>
					<el-tab-pane
						name="My"
						>
						<span slot="label"><i class="el-icon-menu"></i></span>
					</el-tab-pane>
				  	<el-tab-pane 
				  	closable
				    :key="item.name"
				    v-for="(item, index) in editableTabs"
				    :label="item.title"
				    :name="item.name"
				  	>
				    	{{item.content}}
				  	</el-tab-pane> <!--closable可关闭标签-->
				</el-tabs>
			</div>
			<keep-alive >
				<router-view :class="{bottom:true}"></router-view>
			</keep-alive>
		</div>
		
	</div>
</template>

<script>
	//非父子组件传值
	import bus from './../bus'
	export default{
		name:"my",
		data(){
			return{
				defaultActive:'Xiaoxi',//左侧导航默认第几个被选中
				isCollapse: false,//左侧导航收起和展开
				
				visitedviews:[],//存放所有浏览过的且不重复的路由数据
				input:'',
				editableTabsValue: 'Xiaoxi',
		        editableTabs: [
//		        {
//		          title: '控制台',
//		          name: 'Kongzhitai',
//		        }
		        ],
		      	screenWidth: document.body.clientWidth,   //监听屏幕宽度 这里是给到了一个默认值 （这个很重要）
				
			}
		},
		created(){
			bus.$on('isCollapse', (res) => {//非父子组件传值
				console.log(res)
//              this.isCollapse = res;
                this.isCollapse = !this.isCollapse;
            })
		},
		mounted(){
			this.$router.push({name:'Index'})
//			监听屏幕宽度
			let that = this
	        window.onresize = () => {
	            return (() => {
	                window.screenWidth = document.body.clientWidth
	                that.screenWidth = window.screenWidth
	            })()
	        }
		},
		watch: {
			//			监听屏幕宽度
          	screenWidth (val) {
              	this.screenWidth = val
              	console.log(val)
              	//如果监听到屏幕过小收起侧边栏
              	if(val<1000){
              		this.isCollapse=true
              	}else{
              		this.isCollapse=false
              	}
              	
              	
          	}
      	},
		methods:{
			handleOpen(key, keyPath) {
		        console.log(key, keyPath);
		    },
		    handleClose(key, keyPath) {
		        console.log(key, keyPath);
		    },
		    //获取点击左侧子菜单的index
		    handleSelect(key, keyPath){
		    	console.log(key, keyPath);
		    	if(key=='Kongzhitai'){
		    		this.$router.push({name:'Kongzhitai'})
//		    		this.visitedviews.push({
//		    			path:'/kongzhitai',
//		    			name:'Kongzhitai',
//		    			title:'控制台'
//		    		})
		    		//点击让当前table变亮
		    		this.editableTabsValue='Kongzhitai'
		    	}
		    	if(key=='Email'){
		    		this.$router.push({name:'Email'})
		    		this.visitedviews.push({
		    			path:'/email',
		    			name:'Email',
		    			title:'邮箱'
		    		})
		    		//点击让当前table变亮
		    		this.editableTabsValue='Email'
		    	}
		    	if(key=='Zuzhijigo'){
		    		this.$router.push({name:'Zuzhijigo'})
		    		this.visitedviews.push({
		    			path:'/zuzhijigo',
		    			name:'Zuzhijigo',
		    			title:'组织机构管理'
		    		})
		    		//点击让当前table变亮
		    		this.editableTabsValue='Zuzhijigo'
		    	}
		    	if(key=='Wenzhangguanli'){
		    		this.$router.push({name:'Wenzhangguanli'})
		    		this.visitedviews.push({
		    			path:'/wenzhangguanli',
		    			name:'Wenzhangguanli',
		    			title:'文章管理'
		    		})
		    		//点击让当前table变亮
		    		this.editableTabsValue='Wenzhangguanli'
		    	}
		    	//数组对象去重
		    	let hash = {};
		    	const newArr = this.visitedviews.reduce((item, next) => {
				    hash[next.name] ? '' : hash[next.name] = true && item.push(next);
				    return item
				}, []);
		    	console.log(newArr)
		    	this.editableTabs=this.visitedviews=newArr
		    },
		    handleTabsEdit(targetName, action) {
//		    	console.log(targetName, action)
		        if (action === 'remove') {
		          	let tabs = this.editableTabs;
		          	let activeName = this.editableTabsValue;
		          	if (activeName === targetName) {
			            tabs.forEach((tab, index) => {
			              if (tab.name === targetName) {
			                let nextTab = tabs[index + 1] || tabs[index - 1];
			                if (nextTab) {
			                  activeName = nextTab.name;
			                }
			              }
			            });
		          	}
		          	 
		          	this.editableTabsValue = activeName;
		          	this.editableTabs = tabs.filter(tab => tab.name !== targetName);
		          	//差掉之后跳转上一个路由
		          	this.$router.push({name:activeName})
		          	//删除差掉之后数组对应的对象   filter数组过滤
		          	var newArr2 = this.visitedviews.filter((item)=>{
					  	return item.name!=targetName//过滤掉数组中差掉的对象，留下数组对象中没有当前的name一样的对象					
					})
		          	this.visitedviews=newArr2
		          	
		          	//如果标签删除完了之后跳转第一个tab
		          	if(this.visitedviews.length==0){
		          		this.$router.push({name:'Kongzhitai'})
		          		//让当前table变亮
		    			this.editableTabsValue='Kongzhitai'
		          	}
		          
		        }
		    },
		    //tab点击时触发
		    tabClick(res){
		    	console.log(res.name)
		    	this.$router.push({name:res.name})
		    	this.defaultActive=res.name//左侧导航跟着tab变化选中
		    },
		    
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.my{
		height: 100%;display: flex;justify-content: space-between;
		.LeftNav{
			height: 100%;background: #2F4056;
		}
		.rightNav{
			width: 100%;height: 100%;overflow: auto;background: #f2f2f2;
			.top{
				height: 40px;width: 100%;background: white;position: fixed;z-index: 10;
			}
			.bottom{
				height: 100%;padding-top: 50px;overflow: auto;
			}
		}
		.el-menu-vertical-demo:not(.el-menu--collapse) {
		    width: 200px;
		    min-height: 400px;
		}
	}

</style>